<template>
  <div>
    <h2>文章类型({{total}})</h2>
    <el-icon  @click="showDialog" color="#000" :size="20" class="addIcon">
        <plus />
      </el-icon>
    <el-table
      :data="list"
      style="width: 100%; height: 400px; margin-top: 20px;">
      <el-table-column
        prop="typeName"
        label="文章类型">
      </el-table-column>
       <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons'
import { findArticleType, addArticleType, deleteArticleType, editArticleType} from '../../plugins/request'
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  components: {
    Plus
  },
    setup() {
      onMounted(() => {
        getList()
      })
      const state = reactive({
        total: 0,
        page: 1,
        pageSize: 10,
        list: []
      })
      const getList = async () =>  {
        let params = {
          page: state.page,
          pageSize: state.pageSize
        }
        let { data } = await findArticleType(params)
        state.list = data.data.data
        state.total = data.data.total
      }
      const showDialog = () => {
        ElMessageBox.prompt('请输入文章类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(async ({ value }) => {
          let { data } = await addArticleType({'typeName': value})
          if(data.status != 1) return
          state.list.unshift(data.data)
          state.total++
        }).catch((e) => {
          ElMessage({
            type: 'info',
            message: e
          });
        });
      }
      const handleEdit = (val) => {
        ElMessageBox.prompt('修改文章类型', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: val.row.typeName
        }).then(async ({ value }) => {
          if(val.row.typeName == value) return
          let params = {
            'id': val.row.id,
            'typeName': value
          }
          let { data } = await editArticleType(params)
          if(data.status != 1) return ElMessage({
            type: 'error',
            message: data.message 
          })
          ElMessage({
            type: 'success',
            message: '修改成功!'
          })
          val.row.typeName = value
        }).catch((e) => {
          console.log(e)
        });
      }
      const handleDelete =  (val) => {
        ElMessageBox.confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let { data } = await deleteArticleType({'id': val.row.id})
          if(data.status != 1) return ElMessage({
              type: 'error',
              message: data.message
            })
            state.list.splice(val.index_,1)
            state.total--
            ElMessage({
              type: 'success',
              message: '删除成功!'
            })
        }).catch(() => {
          
        });
      }
      return {
        ...toRefs(state),
        handleEdit,
        handleDelete,
        showDialog
      }
    }
}
</script>

<style lang="scss" scoped>
  .addIcon{
    display: block;
    line-height: 49px;
    float: right;
    cursor: pointer;
    font-size: 30px;
    margin-bottom: 20px;
  }
</style>